<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
</head>
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/index.css">
<link rel="icon" href="./img/favicon.ico">
<!-- <link rel="stylesheet" href="./CSS/font_8luqbdxj8jr/iconfont.css"> -->

<body>
  <!-- 顶部开始 -->
  <div class="top">
    <div class="wrap top-box">
      <div class="top-l">
        <span></span>
        <a href="#" class="place">山西</a>
        <a href="#" class="cut">切换至企业版</a>
      </div>
      <div class="top-r">
        <ul>
          <li><a href="login.html">你好，<span class="red">请登录</span></a></li>
          <li></li>
          <li><a href="register.html">免费注册</a></li>
          <li></li>
          <li><a href="#">我的订单</a></li>
          <li></li>
          <li><a href="#">我的京东<span></span></a></li>
          <li></li>
          <li><a href="#" class="red">企业采购<span></span></a></li>
          <li></li>
          <li><a href="#">商家服务<span></span></a></li>
          <li></li>
          <li><a href="#">网站导航<span></span></a></li>
          <li></li>
          <li><a href="#">手机京东</a></li>
          <li></li>
          <li><a href="#">网站无障碍</a></li>
        </ul>
      </div>
    </div>


  </div>
  <!-- 顶部结束 -->

  <!-- 头部开始 -->
  <div class="header">
    <div class="wrap head-box">
      <div class="logo"></div>
      <div class="search">
        <input type="text" placeholder="小米手机" class="header-search">
        <span></span>
        <button></button>
        <!-- 实现模糊查询 -->
        <div class="search-list">

        </div>
      </div>
      <a href="#" class="shopcar">
        我的购物车
        <i class="count">8</i>
      </a>
      <div class=" head-botton">
        <ul>
          <li><a href="#">京东生鲜</a></li>
          <li><a href="#">京东家电</a></li>
          <li><a href="#">秒杀</a></li>
          <li><a href="#">京东超市</a></li>
          <li><a href="#">京东手机</a></li>
          <li><a href="#">京东五金城</a></li>
          <li><a href="#">电脑数码</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">PLUS会员</a></li>
          <li><a href="#">便宜包邮</a></li>
        </ul>
      </div>
    </div>

  </div>
  <!-- 头部结束 -->

  <!-- 轮播图开始 -->
  <div class="banner">
    <div class="wrap">
      <div class="banner-l">
        <div class="dd">
          <ul>
            <li>
              <a href="#">家用电器</a>
            </li>
            <li>
              <a href="list.html">手机</a>
              / <a href="#">运营商</a>
              / <a href="#">数码</a>
            </li>
            <li>
              <a href="#">电脑</a>
              / <a href="#">办公</a>
              / <a href="#">文具用品</a>
            </li>
            <li>
              <a href="#">家居</a>
              / <a href="#">家具</a>
              / <a href="#">家装</a>
              / <a href="#">厨具</a>
            </li>
            <li>
              <a href="#">男装</a>
              /<a href="">女装</a>
              /<a href="">童装</a>
              /<a href="">内衣</a>
            </li>
            <li>
              <a href="#">美妆</a>
              / <a href="#">个护清洁</a>
              / <a href="#">宠物</a>
            </li>
            <li>
              <a href="#">女鞋</a>
              / <a href="#">箱包</a>
              / <a href="#">钟表</a>
              / <a href="#">珠宝</a>
            </li>
            <li>
              <a href="#">男鞋</a>
              / <a href="#">运动</a>
              / <a href="#">户外</a>
            </li>
            <li>
              <a href="#">房产</a>
              / <a href="">汽车</a>
              / <a href="">汽车用品</a>
            </li>
            <li>
              <a href="#">食品</a>
              / <a href="#">酒类</a>
              / <a href="#">生鲜</a>
              / <a href="#">特产</a>
            </li>
            <li>
              <a href="#">艺术</a>
              / <a href="#">礼品鲜花</a>
              / <a href="#">农牧园艺</a>

            </li>
            <li>
              <a href="#">京东买药</a>
              / <a href="#">计生情趣</a>
            </li>
            <li>
              <a href="#">图书</a>
              / <a href="#">文娱</a>
              / <a href="#">教育</a>
              / <a href="#">电子书</a>
            </li>
            <li>
              <a href="#">机票</a>
              / <a href="#">酒店</a>
              / <a href="#">旅游</a>
              / <a href="#">生活</a>
            </li>
            <li>
              <a href="#">支付</a>
              / <a href="#">白条</a>
              / <a href="#">保险</a>
              / <a href="#">企业金融</a>
            </li>
            <li><a href="#">安装</a>
              / <a href="#">维修</a>
              / <a href="#">清洗</a>
              / <a href="#">二手</a>
            </li>
            <li><a href="#">五金机电</a>
              / <a href="#">元器件</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="banner-box">
        <div class="slide-banner">
          <a href="#">
            <img src="./img/1.webp" alt="">
          </a>
          <button class="prev"></button>
          <button class="next"></button>
          <ul class="banner-btn">
            <li class="banner-active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
      <div class="banner-r">
        <img src="./img/ban1.png" alt="">
        <img src="./img/ban2.jpg" alt="">
        <img src="./img/ban3.jpg" alt="">
      </div>
      <div class="user">
        <img src="./img/user.png" alt="">
        <a href="#">Hi!~欢迎逛京东!</a>
        <a class="plus" href="#">
          <span>Plus会员</span><span>立即开通</span>
          <p>专享立减</p>
        </a>
        <a class="plus_two" href="#">
          <span>企业会员</span><span>立即开通</span>
          <p>新人采购至高补贴1240元</p>
        </a>
        <div class="list">
          <ul>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
            <li>
              <img src="./img/user1.png">
              <p>企业购</p>
            </li>
          </ul>
        </div>

      </div>

    </div>


  </div>
  <!-- 轮播图结束 -->

  <!-- 主要内容模块开始 -->
  <div class="content">
    <div class="wrap">
      <div class="miaosha">
        <div class="countdown">
          <p class="next1">今天是2222年2月22日</p>
          <p class="title">秒杀倒计时</p>
          <p class="clock">
            <span id="hour"></span>
            <i>:</i>
            <span id="minutes"></span>
            <i>:</i>
            <span id="scond"></span>
          </p>
          <p class="tips">18:30秒杀结束</p>
        </div>
      </div>
      <div class="youxuan">特色优选</div>
      <div class="guangchang">频道广场</div>
      <div class="tuijian">为你推荐</div>
    </div>
    <div class="elevator">
      <a href="javascript:;" id="miaosha">京东<br>秒杀</a>
      <a href="javascript:;" id="youxuan">特色<br>优选</a>
      <a href="javascript:;" id="guangchang">频道<br>广场</a>
      <a href="javascript:;" id="tuijian">为你<br>推荐</a>
      <a href="javascript:;" id="backTop"><br>顶部</a>
    </div>
  </div>
  <!-- 主要内容模块结束 -->


  <div class="footer">
    <p class="link">关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益</p>
    <p class="copy">Copyright © 2004-2024 京东JD.com 版权所有</p>
  </div>
  <script src="./js/index.js"></script>
</body>

</html>